<template>
    
    <div class="new-preparedProduct-container">
        <el-upload
        class="avatar-uploader"
        :action="uploadImgUrl"
        :show-file-list="false"
        :on-success="handlePreparedSuccess"
        :before-upload="beforePreparedUpload"
        :headers="headers"
        ref="singleUploadRef"
        >
            <img v-if="componentData.image" :src="componentData.image" height="178" width="178" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
        <div v-if="componentData.image" class="new-preparedProduct-info">
            <el-input v-model="componentData.name" placeholder="部件名称" @change="handleInputingChange"></el-input>
            <span class="new-preparedProduct-number">数量：1000</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { UploadInstance, UploadProps } from 'element-plus';
import { globalHeaders } from "@/utils/request";
const { data } = defineProps(['data']);
const emits = defineEmits(['getResult']);
const singleUploadRef = ref<UploadInstance>();
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const uploadImgUrl = ref(baseUrl + "/resource/oss/upload");
const headers = ref(globalHeaders);
interface componentVO{
    image?: string;
    name?: string;
};
const componentData = ref<componentVO>({});

watch(()=>data,()=>{
    componentData.value = {...data};
});

const handlePreparedSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    // console.log(response);
    // console.log('url', URL.createObjectURL(uploadFile.raw!));
    componentData.value.image = URL.createObjectURL(uploadFile.raw!);

};

const beforePreparedUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('图片格式与要求不符')
        return false
    } else if (rawFile.size / 1024 / 1024 > 5) {
        ElMessage.error('图片不可超过 5MB!')
        return false
    }
    return true
};

const debounce = (func:Function,wait:number) => {
    let timeout:any = null;
    return (...arges:any[])=>{
        if(timeout){
            clearTimeout(timeout)
        };
        timeout = setTimeout(() => {
            func.apply(this,arges)
        }, wait);
    }
};

const handleInputingChange = ()=>{
    emits('getResult',componentData);
};

</script>

<style lang="scss" scoped>
.new-preparedProduct-containers{
    width: 100%;
    overflow-x: scroll;
    margin-top:20px;
    .new-preparedProduct-container{
        width: 180px;
    }
    .el-input{
        margin-top:5px;
    }
    .new-preparedProduct-number{
        display: block;
        margin-top:5px;
    }
}
.el-upload {
    
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    border: 1px dashed var(--el-border-color);
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>